<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <header>
      <section>
        <form action="#" id="form">
          <label for="title">ToDoList</label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="添加ToDo"
            required="required"
            autocomplete="off"
          />
        </form>
      </section>
    </header>
    <section>
      <h2>正在进行 <span id="todocount">0</span></h2>
      <ol id="todolist" class="demo-box"></ol>
      <h2>已经完成 <span id="donecount">0</span></h2>
      <ul id="donelist"></ul>
    </section>
    <footer>Copyright © 2014 todolist.cn <a href="#">clear</a></footer>
    <script>
      var todolist, donelist, todocount, donecount, form, title;
      var list = {
        todolist: [],
        donelist: [],
      };
      init();
      function init() {
        todolist = document.querySelector("#todolist");
        donelist = document.querySelector("#donelist");
        todocount = document.querySelector("#todocount");
        donecount = document.querySelector("#donecount");
        title = document.querySelector("#title");
        form = document.querySelector("#form");
        form.addEventListener("submit", submitHandler);
        todolist.addEventListener("click", clickHandler);
        donelist.addEventListener("click", clickHandler);
        window.addEventListener("popstate", popStateHandler);
        if (localStorage.todoList) {
          try {
            list = JSON.parse(localStorage.todoList);
            updateList();
          } catch (e) {
            localStorage.removeItem("todoList");
          }
        }
      }

      function submitHandler(e) {
        e.preventDefault();
        list.todolist.push(title.value);
        title.value = "";
        history.pushState(list, "todo");
        updateList();
      }

      function updateList() {
        localStorage.todoList = JSON.stringify(list);
        todolist.innerHTML = list.todolist.reduce(
          (value, item) => value + createListLi(item),
          ""
        );
        donelist.innerHTML = list.donelist.reduce(
          (value, item) => value + createListLi(item, true),
          ""
        );
        todocount.textContent = list.todolist.length;
        donecount.textContent = list.donelist.length;
      }

      function createListLi(msg, bool) {
        return `<li>
            <input type="checkbox" ${bool ? "checked" : ""}/>
            <p>${msg}</p>
            <a href="#">-</a>
            </li>`;
      }

      function clickHandler(e) {
        if (e.target.nodeName !== "A" && e.target.nodeName !== "INPUT") return;
        var index = Array.from(this.children).indexOf(e.target.parentElement);
        if (e.target.nodeName === "A") {
          if (this === todolist) {
            list.todolist.splice(index, 1);
          } else if (this === donelist) {
            list.donelist.splice(index, 1);
          }
        } else if (e.target.nodeName === "INPUT") {
          if (this === todolist) {
            list.donelist = list.donelist.concat(
              list.todolist.splice(index, 1)
            );
          } else if (this === donelist) {
            list.todolist = list.todolist.concat(
              list.donelist.splice(index, 1)
            );
          }
        }
        history.pushState(list, "todo");
        updateList();
      }

      function popStateHandler(e) {
        list = history.state;
        if (!list) {
          if (localStorage.todoList) {
            list = JSON.parse(localStorage.todoList);
          } else {
            list = {
              todolist: [],
              donelist: [],
            };
          }
        }
        updateList();
      }


    //   埋点
    </script>
  </body>
</html>
